
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
	.archiveCategorie h1 {margin-bottom:10px!important;font-size:20px !important}
	call-button {
    display: block;
	}
	.home main.site-main.container { background: url('https://www.hsls.be/wp-content/uploads/2025/06/iStock-625905206.jpg') no-repeat;max-width:100% !important; margin:0 !important;background-size:400% !important;background-position:top !important}

	
	.site-main.container {background-size:100%;margin:0 auto;}
	
	.hero {padding:0;}


.hero h2 {padding:20px 0 0 }
	.hero h2, .hero p {font-size:20px;text-shadow:none ;box-shadow:none;margin :10px auto;padding:0px;color:#353535 }

	    .site-main.container h1 {
        padding-top: 100px !important;
				margin-bottom: 130px;margin-left:10px;}
	.menu-toggle{
	background-color: transparent;
	border: 0;
	cursor: pointer;
	float: left;
	height: 50px;
	margin-left: 10px;
	outline: 0;
	position: relative;
	width: 50px;
	span {
		left: 10px;
		top: 4px;
		&::before {
			top: -8px;
		}
		&::after {
			bottom: -8px;
		}
		&::before,
		&::after {
			content: '';
		}
	}
	span,
	span::before,
	span::after {
		display: block;
		background-color: white;
		height: 4px;
		position: absolute;
		transition: all .3s ease-in-out;
		width: 30px;
	}
	&.active {
		span {
			background-color: transparent;
			&::before,
			&::after {
				background-color: #353535;
				top: 0;
			}
			&::before {
				transform: rotate(45deg);
			}
			&::after {
				transform: rotate(-45deg);
			}
		}
	}
}
    .main-content,
    .sidebar {
        flex: 1 1 100%;
    }
	
	.site-main.single {
    display:block;width:100%;
   
	}
		
.service-card {width:inherit !important}

.contact-cta a {display:block; margin-top:40px}
	.container {
		padding:0
	}
	.sidebar{display:block;width:100%;}


.btn-primary {font-size:11px;padding:15px 23px}

h1 {font-size:24px;margin:0 auto 20px}

.service-card {text-align:center;width:100%;
}
	.home h1 {padding-top:100px !important;margin-bottom:0px;font-size:28px !important;line-height:30px !important;text-align:center;padding-bottom:0px}

.site-main.container.single {width:100% !important}

.site-main.container.single h1 {padding-top:0px !important}

.blog article {width:100% !important;display:block; !important}

.service-card img {width:100% !important}


}


@media (max-width: 1024px) {
	.home h1 {padding-bottom:120px}
	
	.service-card {
		padding:20px !important; max-width:40%; display:inline-block !important; float:left !important ;}
		
		.hero h2, .hero p {color:white }	
	
}

body {background:white;}

/* Ajout animation scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.site-header {background: #353535 !important}
.attachment-post-thumbnail {width:300px;margin:0 auto;padding:0 !important}

.blog article  {width:30% !important;}
.service-list.blog {background:white !important}
.service-card img {width:330px !important;}
.service-card.animate-on-scroll {padding:0 0 20px 0}

.blog .service-card.animate-on-scroll   {background:white !important;}


.blog .service-card.animate-on-scroll a {color:inherit;font-weight:inherit}

.blog .service-card.animate-on-scroll div {
	color:#353535 !important}
.service-card.animate-on-scroll h2, .service-card.animate-on-scroll div {padding:0 20px}
.home main.site-main.container { background: url('https://www.hsls.be/wp-content/uploads/2025/06/iStock-625905206.jpg') center/cover no-repeat;max-width:100% !important; margin:0 !important}

.blog .service-card.animate-on-scroll   h2 a {color:#353535 !important;}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

strong {font-weight:500 !important}

.rdv {background:#ffb703; padding:20px; border-radius:5px;color:white;display:block;width:200px; height:auto;margin:20px auto;text-align:center;}


.home h1 {text-align:left !important;text-transform:uppercase;color:#FFB703;text-shadow:1px 1px 5px #353535;padding-top:150px !important;margin-bottom:60px;font-size:40px;margin-left:40px;text-shadow:1px 1px 2px #353535}
.service-card h4 {text-align:center;font-size:22px;}
.services h3 {text-align:center !important}
.services {border-radius:5px}
.site-main.container {background:url();background-size:cover;margin-top:0;background-repeat:no-repeat;width:100%;}

.site-main.container h1, .site-main.container {text-align:center;}
.site-main.container.single {background:none;text-align:left;}



.hero p , .hero h2{color:white ;text-shadow:1px 1px 10px #353535 ;padding-bottom:20px ;max-width:400px;margin-left:0px }
.hero p .btn-primary {text-shadow:none}

.hero p, .hero h2 {text-align:left;;margin-bottom:10px}
.single h1 {text-shadow:none;letter-spacing:-1px;text-align:left }

.featured-image-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 0px;
   
    border-radius: 8px;
	display:inline-block;float:left; margin-right:20px;
}

main.single {width:70% !important;display:inline-block !important;}

.sidebar {display:inline-block;width:30% !important;}
.single .entry-content {display:inline-block;}

.single h1 {color:#353535;padding-top:10px !important;font-size:30px}
.featured-image-container {max-height:292px;}

.single .featured-image-container {box-shadow:none;}
.single .entry-content h2{padding: 0;color:#353535 !important;}
.single .entry-content img {border-radius:0; box-shadow:none !important}
h3{padding:20px 0;}

a {text-decoration:none;color:#ffb703;font-weight:bold}
a:hover {opacity:0.5}
.featured-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

.featured-image:hover {
    transform: scale(1.03);
}

.service-card {width:300px !important}

.container {
    display: block;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    gap: 20px;
}

.site-main.single {
    display:inline-block;width:70%;
    background: white;
    padding: 20px;
   
}

.sidebar {
    display:inline-block;width: 30%;float:right;
    background: #fff;
    padding: 0px 0px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.services{background:#f9f6ed}
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.post-footer {display:none;}


a#callButton {color:red !important}

.call-button {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #353535;
  color: red;
  text-align: center;
  padding: 12px 0;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  z-index: 9999;
  display: block;
}


/****/


button {
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

#container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dynamic-div {
  background-color: #3498db;
  color: white;
  padding: 20px;
  border-radius: 8px;
  width: 150px;
  text-align: center;
  transition: transform 0.3s;
}

.dynamic-div:hover {
  transform: scale(1.05);
}

.service-card {max-width:100% !important}

a.call-button {color:white !important}

.archiveCategorie h1 {margin-bottom:60px}